<template>
  <div class="type app-main">
    <div class="main">
      <div class="nav">
        <ul class="ul-nav" ref="navUl">
          <li ref="navLi" v-for="(item,index) in type" @click="toggleNav(index,item)" :class="[selectedIndex== index?'active' :'' ]"  :key="index" :i="index">{{item.title}}</li>
        </ul>
      </div>
      <section class="section-main">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </section>
    </div>
      <!-- <router-link :to="{path:'template'}">查看模版</router-link> -->
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      selectedIndex: 0,
      type: [
        {
          title: '全部',
          id: '0',
          type: 'all'
        },
        {
          title: '热门',
          id: '1',
          type: 'hot'
        },
        {
          title: '节日',
          id: '2',
          type: 'holiday'
        },
        {
          title: '祝福',
          id: '3',
          type: 'birth'
        }
      ]
    }
  },
  methods: {
    toggleNav (index, item) {
      this.selectedIndex = index
      this.$router.push({ path: '/choose', query: { type: item.type }})
    },
    setNavCss (ref) {
      var refs = this.$refs[ref]
      var refone = refs[0]
      var width = (refone.offsetWidth + 20) * refs.length + 40
      this.$refs.navUl.style.width = width + 'px'
    }
  },
  mounted () {
    this.setNavCss('navLi')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{height:100vh;overflow: hidden;background:url(../../assets/img/type/background.png) no-repeat center center;background-size:cover}
.nav{margin-top:8px;overflow-x:auto;}
.ul-nav{min-width: 100%;max-width: 300%;}
.nav li{display:block; float:left;width:1.45rem;padding:5px 0;text-align: center;border-radius: 5px;margin:5px 10px;color:#db281c;background: #fff}
.nav .active{background: #db281c;color: #fff}
.section-main{box-sizing: border-box;position:relative;top:30px;width:6.7rem;margin:0 auto;min-height:9rem;height:calc(100vh - 80px);background-color:#fff;box-sizing:border-box;box-shadow:5px -5px 10px #aaa;border-top-left-radius:20px;border-top-right-radius:20px }
</style>
